import React, { useState } from "react";
import './TodoHeader.css';
import {useDispatch} from 'react-redux';
import { asyncAddTodo } from "../../../app/slices/todoSlice";
export default function TodoHeader() {
  //声明状态
  let [v, setV] = useState('');
  //获取 dispatch 函数
  let dispatch = useDispatch();
  return (
    <div className="todo-header">
      <input onKeyUp={(e) => {
        //判断是否为 回车
        if(e.code === 'Enter'){
          //新增任务 
          // console.log(v);
          dispatch(asyncAddTodo(v));
        }
      }} type="text" value={v} onChange={e => setV(e.target.value)} placeholder="请输入你的任务名称，按回车键确认" />
    </div>
  );
}
